<template>
  <div id="Question">
    <!-- 问题列表 -->
    <div class="list">
      <ul>
        <li v-for="(item, i) in questionList" :key="i">
          <span @click="listClick (i)">{{item.title}}</span>
          <img class="icon" src="~@/assets/images/icon/next.svg" :class="{off: i===listIndex}">
          <dl v-if="i===listIndex">
            <dd v-for="(child, ix) in item.childList" :key="ix"><span>{{child.title}}</span></dd>
          </dl>
        </li>
      </ul>
    </div>
    <!-- 详情 -->
    <div class="question">
      <dl>
        <dt>{{title}}</dt>
        <dd v-html="content" style="white-space:pre-wrap"></dd>
      </dl>
    </div>
    <div style="clear:both"></div>
  </div>
</template>
<script>
import { Center } from './centerApi.js'
export default {
  name: 'Question',
  data () {
    return {
      listIndex: 0,
      questionList: [
        { title: '如何注册用户', content: '', childList: [] }
      ],
      title: '如何注册用户',
      content: ''
    }
  },
  methods: {
    listClick (num) {
      this.listIndex = num
      this.title = this.questionList[num].title
      this.content = this.questionList[num].content
    },
    async getSystemTeaQuestion () { // 获取常见问题
      const res = await Center.getSystemTeaQuestion()
      let data = res.data || []
      if (res.code === '200') {
        this.questionList = data.map(el => {
          return {
            title: el.title,
            content: el.content
          }
        })
        this.listClick(0)
      } else {
        this.$message.error(res.message)
      }
    }
  },
  mounted () {
    this.getSystemTeaQuestion()
  }
}
</script>
<style scoped lang="scss">
#Question{
    .list {
        width: 300px;margin:10px;float:left;
        ul{
          width: 100%;border-top:solid 2px #009cf6;
          li{
            line-height:2;font-size:16px;margin-top: 1px;position:relative;
            .icon{
              position: absolute;top: 10px;right: 5px;height: 16px;width:16px;text-align:center;
              svg{
                width:16px;
              }
            }
            .off {
              transform: rotate(180deg)
            }
            >span{
              border-bottom: solid 1px #E5E5E5;color:#101d37;display:block;padding: 5px 10px;background: #fafafa;
              cursor:pointer;
            }
            dl{
              padding-left: 26px;background: #fafafa;margin-top:1px;margin-bottom:5px;
              dd{
                padding: 5px 0;color:#91959a;
              }
            }
          }
        }
    }
    .question{
      float:right;width: calc(100% - 300px - 20px - 20px);background:#fafafa;height: 600px;margin: 10px;
      dl{
        padding:20px;
        dt{
          font-size:18px;color:#101d37;line-height:2;margin-bottom: 18px;
        }
        dt::after{
            content:'?';height: 20px;width:20px;background:#009cf6;display:inline-block;vertical-align: middle;margin-left: 10px;border-radius:4px;font-size: 12px;text-align:center;line-height:18px;color:#fff;
          }
        dd{
          line-height:2;padding-left: 18px;color:#101d37;
        }
      }
    }
}

</style>
